<template>
  <div class="form_wrap">
    <template v-if="formList.length && formType.length && formMode.length">
      <el-row class="form_item" v-for="(item, index) in formList" :key="index">
        <el-col :span="8">
          <el-input
            :key="index"
            size="small"
            :maxlength="32"
            v-model="item.name"
            @change="handleName"
          ></el-input>
        </el-col>
        <el-col :span="4" style="margin-left: 10px">
          <el-select
            @change="handleChange($event, index)"
            size="small"
            v-model="item.type"
            placeholder="请选择"
          >
            <el-option
              v-for="ele1 in formType"
              :key="ele1.value"
              :label="ele1.name"
              :value="ele1.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8" style="margin-left: 10px">
          <el-button-group>
            <el-button
              :plain="item.disabled || item.required"
              @click="handleChoose(false, index)"
              size="small"
              type="primary"
              >选填</el-button
            >
            <el-button
              @click="handleChoose(true, index)"
              size="small"
              :plain="item.disabled || !item.required"
              type="primary"
              >必填</el-button
            >
            <el-button
              @click="handleShow(index)"
              size="small"
              :plain="!item.disabled"
              type="primary"
              >隐藏</el-button
            >
          </el-button-group>
          <el-button
            @click="hanleDelete(index)"
            style="margin-left: 20px"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </el-col>
        <el-col
          :span="24"
          v-if="item.type === 'INPUT_CHECKBOX' || item.type === 'SELECT'"
        >
          <el-tag
            :key="tag"
            v-for="tag in formList[index].value"
            closable
            effect="plain"
            :disable-transitions="false"
            @close="handleClose(tag, index)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible === index"
            v-focus="inputVisible === index"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(index)"
            @blur="handleInputConfirm(index)"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput(index)"
            >+ 新增选项</el-button
          >
        </el-col>
        <el-col :span="24" v-if="item.type === 'INPUT_RADIO'">
          <el-radio-group @change="handleRadio" v-model="formList[index].defaultValue">
            <el-radio :label="formList[index].value[0].id">
              <el-input
                v-model="formList[index].value[0].name"
                ref="saveTagInput"
                size="small"
                @change="handleRadioName1"
              >
              </el-input>
            </el-radio>
            <el-radio :label="formList[index].value[1].id">
              <el-input
                v-model="formList[index].value[1].name"
                ref="saveTagInput"
                size="small"
                @change="handleRadioName2"
              >
              </el-input>
            </el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    formList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    formType: {
      type: Array,
      default: function () {
        return [];
      },
    },
    formMode: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  //Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
      inputVisible: "",
      inputValue: "",
    };
  },
  methods: {
    handleClose(tag, index) {
      console.log(index);
      if (this.formList[index].value.length <= 1) {
        this.$message.error("至少有1个选项");
      } else {
        this.formList[index].value.splice(this.formList[index].value.indexOf(tag), 1);
        this.$parent.$parent.$parent.saveFormFn();
      }
    },

    showInput(index) {
      this.inputVisible = index;
      console.log(this.inputVisible);
    },

    handleInputConfirm(index) {
      console.log(index);
      let inputValue = this.inputValue;
      if (inputValue) {
        this.formList[index].value.push(inputValue);
      }
      this.inputVisible = "";
      this.inputValue = "";
      console.log(this.inputVisible);
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleChoose(bool, index) {
      //给当前元素设置为必填或者选填
      this.formList[index].required = bool;
      this.formList[index].disabled = false;
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleShow(index) {
      //给表单设置是否禁用
      this.formList[index].disabled = true;
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleChange(val, index) {
      console.log(val, index);
      this.formList[index].defaultValue = "";
      this.formList[index].mode = "INPUT";
      this.formList[index].value = "";
      this.inputVisible = "";
      this.inputValue = "";
      if (val === "INPUT_CHECKBOX") {
        this.formList[index].mode = "MULTIPLE_SELECT";
      }
      if (val === "SELECT" || val === "INPUT_RADIO") {
        this.formList[index].mode = "SINGLE_SELECT";
      }

      if (val === "INPUT_CHECKBOX" || val === "SELECT") {
        this.formList[index].value = ["选项一"];
      } else if (val === "INPUT_RADIO") {
        this.formList[index].value = [
          { id: 1, name: "备选项1" },
          { id: 2, name: "备选项2" },
        ];
        this.formList[index].defaultValue = this.formList[index].value[0].id;
      }
      console.log(this.formList, "22");
      this.$parent.$parent.$parent.saveFormFn();
    },
    hanleDelete(index) {
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$parent.$parent.$parent.deleteForm(this.formList[index].id);
          this.formList.splice(index, 1);
        })
        .catch(() => {
          
        });
    },
    handleName() {
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleRadioName1() {
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleRadioName2() {
      this.$parent.$parent.$parent.saveFormFn();
    },
    handleRadio() {
      this.$parent.$parent.$parent.saveFormFn();
    },
  },
};
</script>
<style lang="scss" scoped>
.form_wrap {
  .form_item + .form_item {
    margin-top: 15px;
  }
}
//相邻兄弟选择器
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
